<template>
  <custom-modal-page :visible.sync="visible">
    <div class="test-config-page-container">
      <div class="page-title-container flex" title="试验配置">
        <a-button type="default" @click="back()">返回 </a-button>
      </div>
      <div class="page-body-container" v-loading="pageLoading">
        <a-empty :image="simpleImage" v-if="dataSource.length == 0" />
        <a-collapse
          v-model="activeKey[item.id]"
          v-for="(item, index) in dataSource"
          :key="index"
        >
          <div class="collapse-custom-title">
            <a-checkbox
              v-model="checkbox[item.id]"
              @change="checkboxChange($event, item.id)"
              >{{ item.trialName }}</a-checkbox
            >
          </div>
          <a-collapse-panel key="1" :show-arrow="false">
            <div class="test-item-container">
              <!-- 试验标准 -->
              <div class="test-item">
                <div class="title">试验标准</div>
                <div class="item-details">
                  <a-row>
                    <a-radio-group v-model="standardRadio[item.id]">
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="8"
                        v-for="stand in item.standardList || []"
                        :key="stand.id"
                      >
                        <a-radio :value="stand.id">
                          {{ stand.trialStandardName }}
                        </a-radio>
                      </a-col>
                    </a-radio-group>
                  </a-row>
                </div>
              </div>
              <!-- 报告模板 -->
              <div class="test-item">
                <div class="title">报告模板</div>
                <div class="item-details">
                  <a-row>
                    <a-radio-group v-model="reportTempRadio[item.id]">
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="8"
                        v-for="reportTemp in item.reportTemplateList || []"
                        :key="reportTemp.id"
                      >
                        <a-radio :value="reportTemp.id">
                          {{ reportTemp.reportName }}
                        </a-radio>
                      </a-col>
                    </a-radio-group>
                  </a-row>
                </div>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <!-- 提交按钮 -->
      <div class="footer">
        <a-button @click="back()"> 取消 </a-button>
        <a-button
          :loading="submitLoading"
          :disabled="submitDisabled"
          type="primary"
          style="margin-left: 10px"
          @click="onSubmit()"
        >
          确定
        </a-button>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import { trialTypeList, saveConfig } from "@/api/wisdom-beam/projectConfig.js";
import { Empty } from "ant-design-vue";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    tenantCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeKey: {},
      submitLoading: false,
      pageLoading: false,
      dataSource: [],
      checkbox: {},
      standardRadio: {},
      reportTempRadio: {},
      submitDisabled: true,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  methods: {
    //提交
    onSubmit() {
      let { checkbox, dataSource, standardRadio, reportTempRadio } = this;
      let checkIds = [];
      let requestData = [];
      this.submitLoading = true;
      Object.keys(checkbox).forEach((key) => {
        if (checkbox[key] == true) {
          checkIds.push(key);
          let { tenantCode } = this;
          let item = dataSource.find((v) => v.id == key);
          requestData.push({
            tenantCode,
            lqType: item.lqType,
            trialNum: item.trialNum || "",
            trialStandardId: standardRadio[key],
            trialReportTemplateId: reportTempRadio[key],
          });
        }
      });
      setTimeout((v) => {
        saveConfig(JSON.stringify(requestData))
          .then((res) => {
            let { data } = res;
            if (data?.result) {
              this.$message.success("操作成功");
            } else {
              this.$message.error("操作失败，请稍后重试！");
            }
            this.back();
          })
          .catch((_) => {
            this.$message.error("操作失败，请稍后重试！");
          })
          .finally((_) => {
            this.submitLoading = false;
          });
      });
    },

    //查询数据
    getData() {
      this.pageLoading = true;
      let { tenantCode } = this;
      trialTypeList({ tenantCode })
        .then((res) => {
          let { data } = res;
          this.dataSource = data?.result || [];
          this.checkIsHistoryData();
        })
        .catch((_) => {
          this.dataSource = [];
        })
        .finally((_) => {
          this.pageLoading = false;
        });
    },

    //监听复选框选择
    checkboxChange(ev, key) {
      let { target } = ev;
      if (target?.checked == true) {
        //展开
        this.$set(this.activeKey, key, ["1"]);
        let item = this.dataSource.find((v) => v.id == key);
        let {
          standardId = "",
          templateId = "",
          standardList = [],
          reportTemplateList = [],
        } = item;
        //试验标准
        if (standardId) {
          this.$set(this.standardRadio, key, standardId);
        } else {
          //默认第一个选中
          let id = standardList[0]?.id;
          this.$set(this.standardRadio, key, id);
        }
        //报告模板
        if (templateId) {
          this.$set(this.reportTempRadio, key, templateId);
        } else {
          //默认第一个选中
          let id = reportTemplateList[0]?.id;
          this.$set(this.reportTempRadio, key, id);
        }
      } else {
        //收起
        this.$set(this.activeKey, key, []);
        this.$set(this.standardRadio, key, "");
        this.$set(this.reportTempRadio, key, "");
      }
      this.setSubmitButtonStatus();
    },

    //校验是否存在已选数据
    checkIsHistoryData() {
      let { dataSource } = this;
      dataSource.forEach((item) => {
        let { standardId = "", templateId = "", id } = item;
        if (standardId || templateId) {
          //展开
          this.$set(this.activeKey, id, ["1"]);
          this.$set(this.checkbox, id, true);
          this.$set(this.standardRadio, id, standardId || "");
          this.$set(this.reportTempRadio, id, templateId || "");
        } else {
          this.$set(this.activeKey, id, []);
          this.$set(this.checkbox, id, false);
        }
      });
      this.setSubmitButtonStatus();
    },

    //校验提交按钮状态
    setSubmitButtonStatus() {
      //初始化判断提交按钮是否解除禁用
      let ids = [];
      Object.keys(this.activeKey).forEach((key) => {
        if (this.activeKey[key] && this.activeKey[key].length > 0) {
          ids.push(key);
        }
      });
      setTimeout((v) => {
        this.submitDisabled = ids.length == 0;
      });
    },

    //返回
    back() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.test-config-page-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 10px 10px;
  /deep/.ant-empty-normal {
    margin: 0;
  }
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    background: #fff;
    .custom-scrollbar();
    /deep/.ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      position: relative;
      .collapse-custom-title {
        position: absolute;
        top: 20px;
        left: 20px;
        font-weight: bold;
        span {
          font-size: 15px;
        }
      }
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 14px;
          color: #525a5d;
        }
        .ant-collapse-content-box {
          padding: 0 30px 30px 30px;
          .test-item-container {
            .test-item {
              margin-bottom: 30px;
              &:last-child {
                margin-bottom: 0;
              }
              &::before {
                content: attr(title);
              }
              .title {
                height: 30px;
                padding-bottom: 4px;
                .flex();
                align-items: center;
                font-size: 15px;
                color: var(--primary-color);
                &::before {
                  display: inline-block;
                  content: "";
                  width: 6px;
                  height: 6px;
                  background: var(--primary-color);
                  border-radius: 50%;
                  margin-right: 10px;
                }
              }
              .item-details {
                background: #f6f9ff;
                padding: 30px 30px 0 30px;
                .ant-radio-group {
                  width: 100%;
                }
                .ant-col {
                  margin-bottom: 30px;
                }
              }
            }
          }
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;

          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
  }
  .footer {
    height: 72px;
    // border-top: 1px solid #f3f4f6;
    .flex();
    justify-content: center;
    align-items: center;
    background: #fff;
  }
}
</style>
